<template>
	<div class="bigwheel" @tap="hide">
		<div class="bw-inner animated fadeIn">
			<div class="bw-container">
				<div class="bw-prizes-wrap">
					<div class="bw-prizes" :style="[style, wheel.style]"></div>
					<div class="bw-prize-line" v-for="(item, index) in prizes" :key="index" :style="item.lineStyle"></div>
					<div class="bw-prize" v-for="(item, index) in prizes" :key="index">
						<div class="bw-prize-inner" :style="item.style">
							{{ item.name }}
						</div>
					</div>
				</div>
				<div class="bw-btn disabled" @click.stop="play">
					<div class="bw-btn-text">
						开始
						<br />
						抽奖
					</div>
				</div>
			</div>
			<div class="bw-gift"></div>
			<!-- <div class="bw-chance">剩余抽奖{{ chance_num }}次</div> -->
		</div>
	</div>
</template>
<script>
import { gsap } from 'gsap'
import { vec2, mat2d } from '@/libs/glmatrix/gl-matrix'
export default {
	data() {
		return {
			isshow: false,
			prizes: [
				{
					name: '一等奖'
				},
				{
					name: '二等奖'
				},
				{
					name: '三等奖'
				},
				{
					name: '谢谢参与'
				}
			],
			style: {},
			wheel: {
				startRad: 0,
				endRad: Math.PI / 4,
				round: 3,
				style: {}
			},
			state: {},
			chance_num: 0,
			lock: false,
		}
	},
	methods: {
		hide() {
			this.isshow = false
		},
		show(options) {
			options = {
				chance_num: 1,
				reward: [
					{
						title: '一等奖'
					},
					{
						title: '二等奖'
					},
					{
						title: '三等奖'
					}
				]
			}
			this.state = options;
			this.chance_num = options.chance_num;
			this.initPrizes(options);
			//放置奖品信息，中奖栏目
			this.isshow = true
		},
		initPrizes(res) {
			this.prizes = Object.assign([], res.reward).map(res => {
				return {
					name: res.title,
					id: res.id
				}
			})
			this.prizes.push(
				{
					name: '谢谢参与'
				}
			)
			this.calPrizes()
		},
		createNameMat(x, y, rad) {
			let nameMat_m1 = mat2d.create();
			let nameMat_m2 = mat2d.create();
			let nameMat = mat2d.create();
			mat2d.translate(nameMat_m1, nameMat_m1, [x, y]);
			mat2d.rotate(nameMat_m2, nameMat_m2, rad + Math.PI / 2);
			mat2d.mul(nameMat, nameMat, nameMat_m1)
			mat2d.mul(nameMat, nameMat, nameMat_m2)
			return nameMat;
		},
		createLineMat(rad) {
			let lineMat = mat2d.create();
			let lineMat_m1 = mat2d.create();
			let lineMat_m2 = mat2d.create();
			mat2d.rotate(lineMat_m2, lineMat_m2, rad);
			mat2d.translate(lineMat_m1, lineMat_m1, [0, -117]);
			mat2d.mul(lineMat, lineMat, lineMat_m2)
			mat2d.mul(lineMat, lineMat, lineMat_m1)
			return lineMat;
		},
		calPrizes() {
			const count = this.prizes.length
			let eRad = 0
			let perRad = (Math.PI * 2) / count
			const sRad = Math.PI / 2
			let size = 150
			let prizes = this.prizes.map((res, index) => {
				let rad = -perRad * index + perRad / 2 + sRad
				rad = -rad
				let x = size * Math.cos(rad)
				let y = size * Math.sin(rad)
				let lineRad = perRad * index

				const nameMat = this.createNameMat(x, y, rad);
				const lineMat = this.createLineMat(lineRad);

				return {
					name: res.name,
					nameMat,
					lineMat,
					style: {
						//transform: `translate(${x}px,${y}px) rotate(${rad + Math.PI / 2}rad)`
						transform: `matrix(${nameMat.join(',')})`
					},
					lineStyle: {
						transform: `matrix(${lineMat.join(',')})`
					}
				}
			})
			console.log(prizes);

			this.prizes = prizes
			//这里计算样式
			let styleText = []
			let s, e, per
			per = 100 / count
			//background-image: conic-gradient(from 40deg, #fff 0%, #fff 20%, #000 20%, #000 40%);
			//conic-gradient(from 90deg, #fff 0%, #fff 25%, #ffd220 25%, #ffd220 50%, #fff 50%, #fff 75%, #ffd220 75%, #ffd220 100%);
			prizes.forEach((res, index) => {
				let color = '#fff'
				if (index % 2 == 1) {
					color = '#ffd220'
				}
				s = per * index + '%'
				e = per * (index + 1) + '%'
				let str = `${color} ${s}, ${color} ${e}`
				styleText.push(str)
			})
			styleText = styleText.join(',')
			styleText = `radial-gradient(circle, #fff, #fff 20%, rgba(255, 255, 255, 0) 100%),conic-gradient(from 0deg, ${styleText})`
			this.wheel.style = {
				background: styleText
			}
			console.log(this.wheel.style)
		},
		moveTo(cb) {
			let t = 3
			let times = [1, 1, 1]
			let times_all = times.reduce((memo, res) => memo + res)
			let times_percent = times.map((res) => res / times_all)
			let { a1, a2 } = this.calA(t, times_percent)
			let v = times_percent[0] * t * a1
			let obj = {
				t: 0
			}
			gsap.to(obj, {
				t: t,
				duration: t,
				ease: 'none',
				onUpdate: () => {
					let x
					if (obj.t < times_percent[0] * t) {
						x = (1 / 2) * a1 * Math.pow(obj.t, 2)
					}
					if (obj.t >= times_percent[0] * t && obj.t <= (times_percent[0] + times_percent[1]) * t) {
						let x1 = (1 / 2) * a1 * Math.pow(times_percent[0] * t, 2)
						let dt = obj.t - times_percent[0] * t
						let x2 = dt * v
						x = x1 + x2
					}
					if (obj.t > (times_percent[0] + times_percent[1]) * t) {
						let x3 = (1 / 2) * a1 * Math.pow(times_percent[0] * t, 2)
						let x4 = times_percent[1] * t * v
						let dt = obj.t - (times_percent[0] + times_percent[1]) * t
						let x5 = dt * v - (1 / 2) * a2 * Math.pow(dt, 2)
						x = x3 + x4 + x5
					}
					x = x + this.wheel.startRad
					let rotateMat = mat2d.create();
					mat2d.rotate(rotateMat, rotateMat, x);

					this.style = {
						transform: `translate(-120px, -120px) scale(1.96) matrix(${rotateMat.join(',')})`
					}

					this.prizes.forEach(res => {
						let { nameMat, lineMat } = res;
						res.style = {
							transform: `matrix(${rotateMat.join(',')}) matrix(${nameMat.join(',')})`
						}
						res.lineStyle = {
							transform: `matrix(${rotateMat.join(',')}) matrix(${lineMat.join(',')})`
						}
					});
					//this.style = { transform: `rotate(${ x }rad)` }
				},
				onComplete: () => {
					this.wheel.startRad = this.wheel.endRad % (Math.PI * 2)
					this.lock = false;
					cb && cb()
				}
			})
		},
		calA(t, times_percent) {
			let { round, endRad, startRad } = this.wheel
			let rate = (1 / 2) * Math.pow(times_percent[0], 2) + times_percent[0] * times_percent[1] + (1 / 2) * Math.pow(times_percent[2], 2)
			let distance = endRad + round * Math.PI * 2 - startRad
			let a = distance / (rate * Math.pow(t, 2))
			let v = (2 * distance) / (times_percent[1] * t + t)
			let a1 = v / (times_percent[0] * t)
			let a2 = v / (times_percent[2] * t)

			return {
				a1,
				a2
			}
		},
		play() {
			if (this.lock) return;
			this.lock = true;
			const prizeIndex = 0;
			this.testRandEndRad(prizeIndex);
			this.moveTo();
			return;
			this.$api.bigwheelPlay({
				play_record_id: this.state.id
			})
				.then(res => {
					res = res.data;
					const prizeIndex = this.prizes.findIndex(prize => prize.name == res.reward_title);
					const isNoPrize = prizeIndex == this.prizes.length - 1;
					if (prizeIndex > -1) {
						this.testRandEndRad(prizeIndex);
						this.moveTo(() => {
							uni.showToast({
								title: (isNoPrize ? '' : `恭喜获得`) + res.reward_title,
								icon: 'none'
							})
						});
					} else {
						this.lock = false;
					}
				})
				.catch(err => {
					uni.showToast({
						title: err.data.msg,
						icon: 'none'
					})
					this.lock = false;
				})
		},
		testRandEndRad(prizeIndex) {
			//let prizeIndex = 0
			let perRad = (Math.PI * 2) / this.prizes.length
			//let endRad = prizeIndex * (Math.PI / 2) + (Math.random() * Math.PI) / 2
			let endRad = -prizeIndex * perRad + perRad / 2 + ((((Math.random() - 1 / 2) * perRad) / 2) % (Math.PI * 2))
			this.wheel.endRad = endRad
		}
	},
	mounted() {
		this.show();
	}
}
</script>
<style lang="scss">
$domain: 'http://s.hangjiayun.com/allxcx/lottery/images/';

html,
body {
	margin: 0;
	padding: 0;
}

.bigwheel {
	position: absolute;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.4) url(#{$domain}slyder-bg.png) 40px 190px / 620px 894px no-repeat;

	.bw {
		&-chance {
			position: absolute;
			bottom: -40px;
			height: 30px;
			text-align: center;
			color: #fff;
			font-size: 28px;
			line-height: 30px;
			left: 0;
			right: 0;
		}

		&-inner {
			width: 720px;
			height: 782px;
			background: url(#{$domain}slyder-container.png) 0 0 / 100% 100% no-repeat;
			position: absolute;
			left: 16px;
			top: 45%;
			transform: translatey(-50%) scale(0.5);
			transform-origin: left center;
		}

		&-prizes {
			will-change: transform;
			width: 240px;
			height: 240px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-120px, -120px) scale(1.96);
			background: url(#{$domain}slyder-inner.png) 0 0 / 100% 100% no-repeat;
			//background-image: radial-gradient(circle, #fff, #fff 20%, rgba(255, 255, 255, 0) 100%),
			//conic-gradient(from 90deg, #fff 0%, #fff 25%, #ffd220 25%, #ffd220 50%, #fff 50%, #fff 75%, #ffd220 75%, #ffd220 100%);

			border-radius: 100%;

			&-wrap {
				width: 470px;
				height: 470px;
				transform: translatex(-50%);
				position: absolute;
				top: 128px;
				left: 50%;
			}
		}

		&-prize {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 1;

			&-inner {
				color: #947600;
				font-size: 28px;
			}

			&-line {
				width: 2px;
				height: 234px;
				//height: 2px;
				background: #ffdba4;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -1px;
				margin-top: -117px;
				will-change: transform;
			}
		}

		&-gift {
			width: 216px;
			height: 216px;
			background: url(#{$domain}gift.png) 0 0 / 100% 100% no-repeat;
			position: absolute;
			right: 25px;
			top: 700px;
			//animation: shake 1s ease infinite;
		}

		&-btn {
			width: 203px;
			height: 218px;
			background: url(#{$domain}slider-ad-btn.png) 0 0 / 100% 100% no-repeat;
			position: absolute;
			left: 50%;
			top: 254px;
			transform: translatex(-50%);
			box-sizing: border-box;
			padding-top: 66px;
			will-change: transform;

			&-text {
				font-size: 40px;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 50px;
			}

			//&.disabled {
			//filter: grayscale(1);
			//}
		}
	}
}
</style>
